<template>
  <div id="app">
    <div class="logo">
      <img src="../assets/logo.png" alt />
    </div>
    <p class="account">帐号登录</p>
    <van-form @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="phnumber"

        label-class
        label-align="right"
        name="phnumber"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
      />
      <van-field
        v-model="messageac"
        center
        type="number"
        name="messageac"
        placeholder="短信验证码"
        :rules="[{ required: true , message: '请填写验证码' }]"
      >
        <template #button>
          <button class="getmac" @click="getMac">{{msg}}</button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button
          block
          type="warning"
          color="#f60"
          native-type="submit"
          text="立即登录"
          style="border-radius:10px;"
        ></van-button>
        <van-button
          style="margin-top:16px; border-radius:10px;"
          block
          native-type="submit"
          text="用户名密码登录"
          to="mobilelogin"
        ></van-button>
        <p class="title">
          <a href="javascript:;">收不到验证码?</a>
        </p>
      </div>
      <van-divider>其他方式登录</van-divider>
      <div class="footer">
        <li>
          <a href="javascript:;" class="iconfont icon-weibo"></a>
        </li>
        <li>
          <a href="javascript:;" class="iconfont icon-instagram"></a>
        </li>
        <li>
          <a href="javascript:;" class="iconfont icon-facebook"></a>
        </li>
        <li>
          <a href="javascript:;" class="iconfont icon-iconfonticons"></a>
        </li>
      </div>
    </van-form>
  </div>
</template>
<script>
import { Notify } from 'vant'
export default {
  props: [],
  data () {
    return {
      msg: '获取验证码',
      phnumber: '',
      messageac: ''
    }
  },
  mounted () {

  },
  methods: {
    async onSubmit (values) {
      // console.log('submit', values)
      const { data: res } = await this.$http.get('/tellogin')
      // console.log(res)
      if (res.data.meta.status === 0) {
        console.log(res)
        if (res.data.data[0].messageac === this.messageac) {
          // 主要通知
          Notify({ message: '登录成功', duration: 1000, background: '#79d70f' })
          window.sessionStorage.setItem('isLogin', true)
          setTimeout(() => {
            this.$router.push('/')
          }, 500)
        }
      } else {
        Notify({ message: '请重新输入验证码!!!', duration: 1000, background: '#ffa41b' })
      }
    },
    async getMac () {
      const reg = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
      console.log(this.phnumber, '------------num')
      console.log(reg.test(this.phnumber), '------------testnum')
      if (reg.test(this.phnumber)) {
        const { data: res } = await this.$http.get('/tellogin')
        if (res.data.meta.status === 0) {
          setTimeout(() => {
            Notify({ message: '验证码是:156251', duration: 2000, background: '#ffa41b' })
          }, 3000)
        } else {
          Notify({ message: '请求错误', duration: 2000, background: '#ffa41b' })
        }
      } else {
        Notify({ message: '手机号码输入不正确!!!', duration: 1000, background: '#ffa41b' })
      }
    }
  }

}
</script>
<style lang="less" scoped>
#app {
  margin-top: 150px;
}
.logo {
  position: relative;
  width: 50px;
  height: 50px;
  // background-color: #f60;
  margin: 0 auto;
  img {
    border-radius: 30%;
    width: 50px;
    height: 50px;
  }
}
.account {
  text-align: center;
  width: 100px;
  font-size: 17px;
  margin: 0 auto;
}

.title {
  width: 200px;
  height: 40px;
  line-height: 40px;
  margin: 10px auto;
  text-align: center;
  a {
    text-decoration: none;
    color: #ccc;
  }
  i {
    margin: 0 5px;
    color: #ccc;
  }
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.van-field {
  font-size: 16px;
}
.van-button {
  background-color: none;
}
.footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  li:first-child {
background-color:rgb(177,83,83);
  }
  li:nth-child(2) {
  background-image: linear-gradient(
     45deg,
     rgb(248, 106, 106),
    rgb(167, 66, 235) ;
    );
  font-size: 20px;
  }
  li:nth-child(3) {
    background-color:rgb(24,129,228);
  }
  li:last-child {
    background-color:rgb(12,171,235);
  }
  li {
    width: 40px;
    height: 40px;
    display: inline-block;
    list-style: none;
    border-radius: 50%;
    background-color: #f60;
    line-height: 40px;
    margin: 0 10px;
    a {
      text-decoration: none;
      color: #fff;
      font-size: 25px;
    }
  }
}
.getmac {
  background-color: #fff;
  border: none;
  color: #7ec7ef;
}
.label-class {
  font-size: 25px;
  background-color: #ccc;
}
</style>
